<template>
  <div class="second">
    <div class="left one">
      <div class="left-content">
        <div class="left-top">
          <ul>
            <li @click="change(1)" :class="{active:type==1}"><span>分组</span></li>
            <li @click="change(2)" :class="{active:type==2}"><span>国家地区</span></li>
            <li @click="change(3)" :class="{active:type==3}"><span>来源</span></li>
            <li @click="change(4)" :class="{active:type==4}"><span>星级</span></li>
            <li @click="change(5)" :class="{active:type==5}"><span>标签</span></li>
            <li @click="change(6)" :class="{active:type==6}"><span>活跃度</span></li>
          </ul>
          <el-select v-model="userID1" @change="getEchartBar">
            <el-option v-for="item,index in customer" :key="index"
                       :label="item.name" :value="item.id">{{item.name}}
            </el-option>
          </el-select>
        </div>
        <div id="myEchartBar" style="width: 100%;height: 260px;"></div>
      </div>
    </div>
    <div class="one right">
      <div class="right-top">
        <div class="top-left">
          <h1>营销统计</h1>
          <ul style="text-align: right">
            <li @click="toggle(0)" :class="{active:staticType==0}"><span>邮件营销</span></li>
            <li @click="toggle(1)" :class="{active:staticType==1}"><span>社交营销</span></li>
          </ul>
        </div>
        <el-select v-model="userID2" @change="handleChange">
          <el-option v-for="item,index in customer" :key="index"
                     :label="item.name" :value="item.id">{{item.name}}
          </el-option>
        </el-select>
      </div>
      <div style="width:100%;height: 260px" id="myEchartBarThird" v-if="staticType==0"></div>
      <div style="width:100%;height: 260px" id="myEchartBarThird1" v-else></div>
    </div>
  </div>
</template>

<script>
    import {customerInfo, getEmailBar, socialStatic} from '@/api/home'
    import {mapGetters} from 'vuex'

    export default {
        name: "Second",
        props: {
            customer: {
                default: [],
            },
        },
        computed: {
            ...mapGetters(['userInfo'])
        },
        data() {
            return {
                staticType: 0,
                type: 1,
                money: '',
                userID1: '',
                userID2: '',
                country: '美国-纽约（GMT-5）',
                timeArr: [
                    {name: '美国-纽约（GMT-5）', type: '美国-纽约（GMT-5）'},
                    {name: 'GMT-9：阿拉斯加', type: 'GMT-9'},
                    {name: 'GMT-8：太平洋时间', type: 'GMT-8'},
                    {name: 'GMT-7：山脉时间', type: 'GMT-7'},
                    {name: 'GMT-6：中央标准时间', type: 'GMT-6'},
                    {name: 'GMT-5：东部时间', type: 'GMT-5'},
                    {name: 'GMT-4：太平洋时间', type: 'GMT-4'},
                    {name: 'GMT-3：巴西利亚时间', type: 'GMT-3'},
                    {name: 'GMT-2：大西洋中部时间', type: 'GMT-2'},
                    {name: 'GMT-1：亚述尔群岛', type: 'GMT-1'},
                    {name: 'GMT：伦敦', type: 'GMT'},
                    {name: 'GMT+1：罗马，巴黎', type: 'GMT+1'},
                    {name: 'GMT+2：雅典，以色列', type: 'GMT+2'},
                    {name: 'GMT+3：莫斯科，科威特', type: 'GMT+3'},
                    {name: 'GMT+4：喀布尔', type: 'GMT+4'},
                    {name: 'GMT+5：伊斯兰堡，卡拉奇', type: 'GMT+5'},
                    {name: 'GMT+6：阿拉木图，科伦坡', type: 'GMT+6'},
                    {name: 'GMT+7：曼谷，雅加达', type: 'GMT+7'},
                    {name: 'GMT+8：北京，香港，台湾', type: 'GMT+8'},
                    {name: 'GMT+9：东京', type: 'GMT+9'},
                    {name: 'GMT+10：悉尼', type: 'GMT+10'},
                ],
            }
        },
        created(){
            this.userID1 = this.userID2 = this.userInfo.user_id;
        },
        mounted() {
            this.getEchartBar();
            //获取邮件统计饼状图
            this.getEmailBar();
        },
        methods: {
            toggle(type) {
                if (type == 0) {
                    this.getEmailBar();
                } else {
                    this.getSocialBar();
                }
                this.staticType = type;
            },
            handleChange() {
                if (this.staticType == 0) {
                    this.getEmailBar();
                } else {
                    this.getSocialBar();
                }
            },
            getEmailBar() {
                getEmailBar({userId: this.userID2}).then(res => {
                    if (res.data.success) {
                        let result = res.data.data;
                        const echartData = [`总送达数(${result.sendCount}条)`, `总发送数(${result.succeedSendCount}条)`, `总打开数(${result.openCount}条)`, `总点击数(${result.clickCount}条)`];
                        const echartSeris = [
                            {value: result.sendCount, name: echartData[0], itemStyle: {color: '#BB90EB'}},
                            {value: result.succeedSendCount, name: echartData[1], itemStyle: {color: '#FEA99B'}},
                            {value: result.openCount, name: echartData[2], itemStyle: {color: '#26B9FC'}},
                            {value: result.clickCount, name: echartData[3], itemStyle: {color: '#8BC4F6'}},
                        ]
                        let option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "邮件统计 <br/>{b}: {c} ({d}%)",
                            },
                            series: [
                                {
                                    type: 'pie',
                                    avoidLabelOverlap: false,
                                    data: echartSeris
                                }
                            ],
                            textStyle: {
                                fontSize: 14
                            }
                        };
                        this.myChart = this.$echarts.init(document.getElementById('myEchartBarThird'));
                        this.myChart.setOption(option);
                        setTimeout(() => {
                            this.myChart.dispatchAction({
                                type: 'showTip',
                                seriesIndex: 0,  // 显示第几个series
                                dataIndex: 1 // 显示第几个数据
                            });
                        })
                    }

                })
            },
            getSocialBar() {
                socialStatic({subId: this.userID2}).then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        const echartData = [`评论数(${result.commentsCount}条)`, `动态数(${result.feedCount}条)`,
                            `点赞数(${result.likesCount}条)`, `转发数(${result.refeedsCount}条)`, `规则数(${result.ruleCount}条)`];
                        const echartSeris = [
                            {value: result.commentsCount, name: echartData[0], itemStyle: {color: '#BB90EB'}},
                            {value: result.feedCount, name: echartData[1], itemStyle: {color: '#FEA99B'}},
                            {value: result.likesCount, name: echartData[2], itemStyle: {color: '#26B9FC'}},
                            {value: result.refeedsCount, name: echartData[3], itemStyle: {color: '#8BC4F6'}},
                            {value: result.ruleCount, name: echartData[4], itemStyle: {color: '#8693f3'}},
                        ]
                        let option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "社交统计 <br/>{b}: {c} ({d}%)",
                            },
                            series: [
                                {
                                    type: 'pie',
                                    avoidLabelOverlap: false,

                                    data: echartSeris
                                }
                            ],
                            textStyle: {
                                fontSize: 14
                            }
                        };
                        this.myChart = this.$echarts.init(document.getElementById('myEchartBarThird1'));
                        this.myChart.setOption(option);
                        setTimeout(() => {
                            this.myChart.dispatchAction({
                                type: 'showTip',
                                seriesIndex: 0,  // 显示第几个series
                                dataIndex: 1 // 显示第几个数据
                            });
                        })
                    }
                })
            },
            //获取客户统计信息
            getEchartBar() {
                customerInfo({type: this.type, userid: this.userID1}).then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        let titleArr = [], contentArr = [];
                        result.map((item, index) => {
                            let demo = item.title + "(" + item.totalCount + "个)"
                            if (this.type == 4) {
                                demo =this.filterStar(item.title) + "星(" + item.totalCount + "个)"
                            }
                            titleArr.push(demo);
                            let color;
                            switch (index) {
                                case 0:
                                    color = "#55626F";
                                    break;
                                case 1:
                                    color = "#54CDC3";
                                    break;
                                case 2:
                                    color = "#40f213";
                                    break;
                                case 3:
                                    color = "#FC6B6D";
                                    break;
                                case 4:
                                    color = "#8795F0";
                                    break;
                                default:
                                    color = this.getColor();
                            }
                            const obj = {value: item.totalCount, name: demo, itemStyle: {color: color}};//55626F 54CDC3 C8F26D FC6B6D 8795F0
                            contentArr.push(obj)
                        })
                        let option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "客户统计 <br/>{b} : {c} ({d}%)"
                            },
                            calculable: true,
                            series: [
                                {
                                    type: 'pie',
                                    radius: '65%',
                                    center: ['50%', '50%'],
                                    roseType: 'area',
                                    data: contentArr
                                }
                            ],
                            textStyle: {
                                fontSize: 14
                            }
                        };
                        this.myChart = this.$echarts.init(document.getElementById('myEchartBar'));
                        this.myChart.setOption(option);
                        setTimeout(() => {
                            this.myChart.dispatchAction({
                                type: 'showTip',
                                seriesIndex: 0,  // 显示第几个series
                                dataIndex: 1 // 显示第几个数据
                            });
                        })
                    }
                })
            },
            filterStar(num){
                switch (num) {
                    case 1:
                        return '一';
                    case 2:
                        return '二';
                    case 3:
                        return '三';
                    case 4:
                        return '四';
                    case 5:
                        return '五';
                    default:
                        return '未评'
                }
            },
            //切换选择
            change(type) {
                if (type != this.type) {//不相同才请求
                    this.type = type;
                    this.getEchartBar();
                }
            },
            //获取随机颜色
            getColor() {
                var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
                var colorArray = colorValue.split(",");
                var color = "#";
                for (var i = 0; i < 6; i++) {
                    color += colorArray[Math.floor(Math.random() * 16)];
                }
                return color;
            },
        }
    }
</script>

<style lang="scss">
  $homeColor: #345A91;
  $blueColor: #3399F6;
  .second {
    display: flex;
    margin: 0 0 20px 0;
    justify-content: space-between;

    .one {
      border-radius: 10px;
      background-color: #fff;
    }

    .left {
      width: 49%;

      .left-content {
        padding: 15px;
      }

      .left-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;

        ul {
          display: flex;
          justify-content: space-between;
          width: 75%;
          font-size: 14px;
          background: linear-gradient(91deg, rgba(134, 149, 240, 1) 0%, rgba(165, 175, 242, 1) 100%);
          border-radius: 10px;
          padding: 0 15px !important;

          li {
            padding: 15px 0;
            cursor: pointer;
          }

          li.active {
            span {
              padding: 5px 10px;
              font-size: 16px;
              background-color: #ffffff3b;
              border-radius: 5px;
            }
          }
        }

        .el-select {
          width: 100px;

          .el-input {
            input.el-input__inner {
              text-align: center;
              height: 49px;
              line-height: 49px;
              background-color: #BC90EB;
              color: #fff;
              border: 0;
              font-size: 16px;
              border-radius: 5px;
            }

            .el-select__caret {
              color: #fff;
            }
          }

        }
      }
    }

    .right {
      width: 46.5%;
      padding: 15px;
    }

    .right-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 52px;
      color: #fff;
      overflow: hidden;

      .top-left {
        display: flex;
        justify-content: space-between;
        background: linear-gradient(91deg, rgba(140, 196, 248, 1) 0%, rgba(139, 196, 248, 1) 100%);
        width: 75%;
        padding: 0 15px;
        border-radius: 10px;

        h1 {
          font-size: 15px;
        }
      }

      ul {
        width: 60%;
        line-height: 50px;
        border-radius: 10px;

        li {
          display: inline-block;
          width: 50%;
          text-align: center;
          color: #fff;
          cursor: pointer;
        }

        li.active {
          span {
            padding: 5px 10px;
            font-size: 17px;
            background-color: #ffffff3b;
            border-radius: 5px;
          }
        }
      }

      .el-select {
        width: 100px;

        .el-input {
          input.el-input__inner {
            text-align: center;
            height: 49px;
            line-height: 49px;
            background-color: #BC90EB;
            color: #fff;
            border: 0;
            font-size: 16px;
            border-radius: 5px;
          }

          .el-select__caret {
            color: #fff;
          }
        }

      }
    }

  }
</style>
